<template>
  <!-- <view class="xzw_notice" :style="{color:getColor(theme),backgroundColor:getBgColor(theme)}"> -->
  <view class="xzw_notice" :style="{ color: color }">
    <!-- <uni-icons v-if="showIcon === true || showIcon === 'true'" class="notice_left" type="sound" color="#ECC37A" size="22" /> -->
    <image
      v-if="showIcon === true || showIcon === 'true'"
      class="notice_left"
      src="/static/images/notice.png"
      alt=""
      srcset=""
    />
    <swiper
      class="notice_center"
      vertical
      v-if="direction == 'column'"
      :autoplay="true"
      :interval="4000"
      :duration="500"
      :circular="true"
      disable-touch
    >
      <swiper-item
        v-for="(item, index) in list"
        :key="index"
        class="swiperIn"
        @click="goItem(item)"
      >
        <view>{{ item[theKey] }}</view>
      </swiper-item>
    </swiper>
    <view class="notice_center2" v-else
      ><view>{{ list[0][theKey] }}</view></view
    >
    <view class="notice_right" v-if="showMore">
      <!-- <view @click="goMore">更多</view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: "xzwNotice",
  props: {
    //主题色,default|primary|error|warning|success|info
    theme: {
      type: String,
      default: "default",
    },
    bgColor: {
      type: String,
    },
    color: {
      type: String,
      default: "#000000",
    },
    // 是否显示左侧icon
    showIcon: {
      type: [Boolean, String],
      default: true,
    },
    // 是否显示更多
    showMore: {
      type: [Boolean, String],
      default: true,
    },
    list: {
      type: Array,
      default() {
        return [
          { id: 1, Title: "消息通知公告1" },
          { id: 2, Title: "消息通知公告2" },
        ];
      },
    },
    //公告数组的键名
    theKey: {
      type: String,
      default: "Title",
    },
    //方向，column垂直，row水平时取第一条公告
    direction: {
      type: String,
      default: "column",
    },
  },
  data() {
    return {
      text: "",
    };
  },
  methods: {
    getColor(theme) {
      if (theme == "primary") {
        return "#2979FF";
      } else if (theme == "error") {
        return "#FA3534";
      } else if (theme == "warning") {
        return "#FF9A43";
      } else if (theme == "success") {
        return "#1BBF6C";
      } else if (theme == "info") {
        return "#909399";
      } else {
        return "#303133";
      }
    },
    getBgColor(theme) {
      if (theme == "primary") {
        return "#ECF5FF";
      } else if (theme == "error") {
        return "#FEF0F0";
      } else if (theme == "warning") {
        return "#FDF6EC";
      } else if (theme == "success") {
        return "#DBF1E1";
      } else if (theme == "info") {
        return "#F4F4F5";
      } else {
        return "#FFFFFF";
      }
    },
    goItem(item) {
      this.$emit("goItem", item);
    },
    goMore() {
      this.$emit("goMore");
    },
  },
};
</script>

<style lang="scss">
.xzw_notice {
  font-size: 28rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  box-sizing: border-box;
  width: 100%;

  // background: rgba(255, 255, 255, 0.06);
  // box-shadow: 0px 16px 20px 2px rgba(0, 0, 0, 0.33);

  background: #dce5ee75;
  border-radius: 16rpx;
  // border: 4rpx solid #191919;
  // backdrop-filter: blur(10rpx);
  .notice_left {
    height: 40rpx;
    width: 40rpx;
    object-fit: contain;
  }
  .notice_center {
    flex: 1;
    height: 80rpx;
    margin-left: 28rpx;
    .swiperIn {
      height: 80upx;
      display: flex;
      align-items: center;
      view {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 26rpx;
      }
    }
  }
  .notice_center2 {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 680rpx;
    overflow: hidden;

    view {
      position: absolute;
      white-space: nowrap;
      padding-left: 100%;
      animation: notice 3.5s 0s linear infinite both;
    }
  }
  .notice_right {
    margin: 0 0 0 20upx;
    img {
      width: 16rpx;
      height: 14rpx;
    }
  }
  @keyframes notice {
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }
}
</style>
